<template>
	<view>
		<view style="padding: 30rpx 30rpx 140rpx;">
			<view class="flexbetween" @click="shows=true">
				<view class="strongtext sanshier" style="min-width: 160rpx;">开始时间</view>
				<view class="flexright">
					<input type="text" disabled class="margin_right ershiba" placeholder="请选择开始时间" v-model="start">
					<u-icon name="arrow-right"  color="#999999" size="16"></u-icon>
				</view>
			</view>
			<view class="flexbetween margin_top"  @click="showss=true">
				<view class="strongtext sanshier"  style="min-width: 160rpx;">结束时间</view>
				<view class="flexright">
					<input type="text" disabled class="margin_right ershiba" placeholder="请选择结束时间" v-model="end">
					<u-icon name="arrow-right"  color="#999999" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="flexbetween gudingdb ffffff mainpadding">
			<view class="wushi flexcenter"  @click="chongzhi">
				<view class="chongzhibtn">重置</view>
			</view>
			<view class="wushi flexcenter" @click="sjclose">
				<view class="quedbtn">确定</view>
			</view>
		</view>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			closeOnClickOverlay @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" closeOnClickOverlay @close="showss=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name: "shijian",
		props:["messageInfo"],
		data() {
			return {
				start: '',
				end: '',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
			}
		},
		created() {
			console.log(this.messageInfo,"999");
			this.start = this.messageInfo.start_time
			this.end = this.messageInfo.end_time
			this.mintime = this.messageInfo.mintime
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '';
				this.mintime = e.value;
				this.start = httpRequest.returnDate(e.value);
				
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.end =  httpRequest.returnDate(e.value);
			},
			sjclose(){
				let data = {
					start:this.start,
					end:this.end,
					mintime:this.mintime
				}
				this.$emit("confirm",data)
			},
			chongzhi(){
				this.start = ""
				this.end = ""
				this.mintime = Number(new Date())
				this.sjclose()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chongzhibtn {
		width: 292rpx;
		height: 72rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.wushi {
		width: 50%;
	}
	.quedbtn {
		width: 292rpx;
		height: 72rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.huibtn {
		width: 140rpx;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lvbtn {
		width: 140rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>